<template>
  <section class="foo bar">
    <p v-bind:class="{active: isActive}">激活样式</p>
    <p class="static" v-bind:class="{active: isActive,'text-danger': hasError}">class和bind:class混用</p>
    <p v-bind:class="classObject">用对象的形式</p>
    <p v-bind:class="computedObject">用计算属性的形式</p>
    <p v-bind:class="[acitveClass, errorClass]">用数组的形式</p>
    <p v-bind:class="[isActive ? acitveClass: '', errorClass]">用数组的形式和三元表达式</p>
    <p v-bind:class="[{active: isActive}, errorClass]">用数组的形式和对象</p>
  </section>
</template>

<script>
export default {
  name: "ClassBinding",
  data() {
    return {
      isActive: true,
      hasError: true,
      classObject: {
        active: true,
        "text-danger": false
      },
      acitveClass: "active",
      errorClass: "text-danger"
    };
  },
  computed: {
    computedObject() {
      return {
        active: this.isActive && !this.error,
        "text-danger": this.error && this.error.type === "fatal"
      };
    }
  }
};
</script>

<style scoped>
.active {
  border: thin solid red;
}

.static {
  background: lightblue;
}

.text-danger {
  color: red;
}
</style>
